<template>
  <div>
   <el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple">
  【题型】:{{popdata.questionType}}
  </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
  【编号】:{{popdata.id}}
  </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
  【难度】:{{popdata.difficulty}}
  </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
  【标签】:{{popdata.tags}}
  </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
  【学科】:{{popdata.subjectID}}
  </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
  【目录】:{{popdata.catalog}}
  </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
  【方向】:{{popdata.direction}}
  </div></el-col>
    </el-row>
    <hr>
    <!-- 题干部分 -->
  <el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark">
  【题干】: <br>
  <span style="color: #1e1eff;"> {{popdata.question}}</span>
    <!-- 多选 -->
  <el-row>
  <el-col :span="24"><div style="margin-top:10px ;" class="grid-content bg-purple-dark">
    多选题选项:(以下选中的选项为正确答案)
    </div></el-col>
    <div>
    <el-checkbox v-model="checked">span</el-checkbox>
    </div>
    <div><el-checkbox v-model="checked">section</el-checkbox></div>
    <div> <el-checkbox v-model="checked">i</el-checkbox></div>
    <div ><el-checkbox v-model="checked">em</el-checkbox></div>
    <div> <el-checkbox v-model="checked">div</el-checkbox></div>

</el-row>
  </div></el-col>
  </el-row>
<hr>
<!-- 参考答案 -->
<el-row>
  <el-col :span="24"><span class="grid-content bg-purple-dark">
     【参考答案】:
     <el-button type="danger">视频答案预览</el-button>
    </span></el-col>
</el-row>
<hr>
<!-- 答案解析 -->
<el-row>
  <el-col :span="24"><span class="grid-content bg-purple-dark"></span>
   【答案解析】:{{popdata.answerID}}
  </el-col>
</el-row>
<hr>
<!-- 题目备注 -->
<el-row>
  <el-col :span="24"><span class="grid-content bg-purple-dark">
     【题目备注】:{{popdata.remarks}}
    </span></el-col>
</el-row>
<div class="right">
 <el-button type="primary" @click="clonsPop">关闭</el-button>
</div>
  </div>
</template>

<script>
// import { detail } from '@/api/hmmm/questions'
export default {
  // props: {
  //   tableData: {
  //     typeo: Object,
  //     required: true
  //   }
  // },
  name: 'popUp',
  data () {
    return {
      popdata: {
        questionType: '多选题',
        id: 22,
        difficulty: '一般',
        tags: '属性',
        subjectID: '前端',
        catalog: 'vue基础',
        direction: '企业服务',
        question: '在css中可以直接设置高度的容器',
        answerID: '用于布局的容器组件',
        remarks: '用于布局的容器组件'

      }
    }
  },
  // created () {
  //   this.detail()
  // },
  methods: {
    // // 基础题库详情
    // async  detail () {
    //   const res = await detail(this.tableData)
    //   console.log(res)
    // },
    // 关闭弹框
    clonsPop () {
      this.$emit('clonsPop')
    }
  }
}
</script>

<style>
.el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .right{
    text-align: right;
  }
  </style>
